import React, { useState, useEffect } from 'react';
import { DlgInput } from '../../sort/ctl/ctl';
import { useStep } from 'use/step';
import { useScan } from 'use/scan';
import { StepView, StepDes } from 'base/ctl/base';
import { MainMenu } from 'base/ctl/menu';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { DlgLog } from 'base/ctl/log';
import { DlgBind } from '../../sort/ctl/bind';
import { g_db, g_wsn } from 'db/state';
import { NuiBt, useHigh } from 'sui';
import { loc } from 'local/index.js';
import { clear_info } from 'use/info';

const fix_esop = () => {
    return [
        {stepcode: 115, stepdes: <div>扫描<span className="text-red-600">外圈</span>轴承码</div>},
        {stepcode: 116, stepdes: <div>扫描<span className="text-red-600">内圈</span>轴承码</div>},
    ];
};

const ClientView = ({ umd, wsn, hreturn }) => {
    const [open_input, openInput] = useState(false);
    const [open_menu, openMenu] = useState(false);
    const [open_bind, openBind] = useState(false);
    const [open_log, openLog] = useState(false);
    const [high] = useHigh(10, 200)

    useScan(wsn, umd);

    useEffect(() => {
        if (!wsn) {
            return;
        }

        umd.setEsop(fix_esop());
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [wsn]);

    const hfin = () => {
        umd.clear();
        clear_info();
    };

    const menu = [{
        label: "重新开始",
        name: "clear",
        hcmd: () => hfin(),
    }, {
        label: "输入条码",
        name: "input",
        hcmd: () => openInput(true),
    }, {
        label: "解绑料箱",
        name: "rebind",
        hcmd: () => openBind(true),
    }, {
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between">
                <div className="inline-flex">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <Title sub="NG单圈" value={g_wsn()} width="w-56"/>
                    <Title value={g_db.task()} sub="工单号" width="w-56"/>
                    <Title value={umd.get("psn")} sub="外圈轴承码" width="w-64"/>
                    <Title value={umd.get("msn")} sub="内圈轴承码" width="w-64"/>
                </div>
                <div className="inline-flex">
                    <NuiBt color="teal" className="mt-1 ml-4 mr-4 w-px-next" hcmd={hreturn}>
                        <div className="text-2xl">返回</div>
                    </NuiBt>
                </div>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div className="inline-flex justify-between my-4 mr-1">
                        <StepDes umd={umd}/>
                    </div>
                    <div style={{ height: `${high - 310}px`, width: "100%" }} className="my-1 border">
                        <StepView umd={umd}/>
                    </div>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{umd.get("err")}</div>
                </div>
                <div className="flex justify-center ml-2 w-32">
                    <Time up={true}/>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
            <DlgBind open={open_bind} setOpen={openBind}/>
            <DlgInput open={open_input} setOpen={openInput}/>
        </div>
    );
};

const NgClient = ({ line, wsn, hreturn }) => {
    const umd = useStep(line, wsn);

    if (g_db.is_stop_scan()) {
        g_db.start_scan();
    }

    return <ClientView umd={umd} wsn={wsn} hreturn={hreturn}/>;
};

export {NgClient};
